<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title" />
		<view class="JoinInList">
			<view class="item" v-if="user.length!=0" v-for="(item,index) in user " :key="index">
				<view class="info" @click="touser(item)">
					<view class="icon">
						<image v-bind:src="item.avatar" class="img-bg-img" mode="aspectFill"></image>
						<view class="sex">
							<image v-if="item.gender==2"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png">
							</image>
							<image v-if="item.gender==1"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png">
							</image>
						</view>
					</view>
					<view class="detailed">
						<view class="name">{{item.nickname}}</view>
						<view class="desc">{{item.ipProvince?'item.ipProvince':''}}24岁 · 年薪10-20W</view>
					</view>
				</view>
				<view class="btn" v-if="!item.relationFlag"
					@click="concernUser(item.relationFlag,item.fromUid,item.toUid,index)">关注</view>
				<view class="btn" v-else @click="concernUser(item.relationFlag,item.fromUid,item.toUid,index)">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205034.png">
					</image>
				</view>
			</view>
			<view v-if="user.length==0 && loaded" style="width: 100%; margin-top: 24rpx;">
				<text class="position-relative d-flex font-bold font30"
					style="justify-content: center;align-items: center;top: 405rpx;">您暂时还没有粉丝</text>
				<image class="position-relative" style="top: -73rpx;left: 58rpx;width: 80%;"
					src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { userApi } from '../../http/userApi';
	import { TaskApi } from '../../http/taskApi';
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	import store from '@/store/index.js';
	let token = uni.getStorageSync(USER_TOKEN);
	export default {
		data() {
			return {
				title: '粉丝',
				param: {
					type: 2,
					pageIndex: 1,
					pageSize: 9
				},
				loaded: false,
				isLastPage: false,
				user: [] //传过来的用户
			}
		},
		components: {
			TitleBarVue
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.param.pageIndex += 1; // 页码增加
				this.Relation();
			}
		},
		onShow() {
			this.user = []
			this.Relation();
		},
		methods: {
			async Relation() {
				this.loaded = false
				let res = await userApi.getRelationFrom(this.param);
				if (res.records.length < this.param.pageSize) {
					this.isLastPage = true;
				}
				this.loaded = true
				const start = this.user.length;
				this.user = [...this.user, ...res.records]
				console.log(this.user);
			},
			touser(i) {
				console.log(i);
				let uid = i.fromUid;
				if (uid == this.$store.state.user.uid) {
					return
				}
				uni.navigateTo({
					url: `/pagesMain/HomePage/HomePage?id=${uid}`
				});
			},
			async concern(params) {
				let res = await userApi.relation(params);
			},
			checkRealNaem() { //判断是否实名
				// if (this.$store.state.user.realName == '' || this.$store.state.user.realName == null) {
				// 	return false
				// } else {
				// 	return true
				// }
				return true
			},
			// 添加朋友
			addFriend(uid){
				let that = this
				that.$tim.addFriend({
					to: uid,
					source: 'AddSource_Type_App',
					type: 'Add_Type_Both',
				}).then((imResponse) => {
					const { code } = imResponse.data;
					if (code === 30539) {
					} else if (code === 0) {
						console.log('添加好友成功！')
					}
				}).catch((imError) => {
					console.warn('addFriend error:', imError);
				});
			},
			// 删除好友
			deleteFriend(uid) {
				let that = this
				let userIDList = []
				userIDList.push(uid)
				let promise = that.$tim.deleteFriend({
					userIDList: userIDList,
					type: 'Delete_Type_Both'
				});
				promise.then(function(imResponse) {
					const { successUserIDList, failureUserIDList } = imResponse.data;
					// 删除成功的 userIDList
					successUserIDList.forEach((item) => {
						const { userID } = item;
					});
					// 删除失败的 userIDList
					failureUserIDList.forEach((item) => {
						const { userID, code, message } = item;
					});
					// 如果好友列表有变化，则 SDK 会触发 TencentCloudChat.EVENT.FRIEND_LIST_UPDATED 事件
				}).catch(function(imError) {
					console.warn('removeFromFriendList error:', imError);
				});
			},
			// 关注/取关
			concernUser(relationFlag, fromUid, toUid, index) {
				if (this.checkRealNaem()) {
					let params = {
						bindFlag: relationFlag ? 0 : 1,
						fromUid: toUid,
						toUid: fromUid,
						type: 2
					}
					if (params.fromUid == params.toUid) {
						return
					}
					if (relationFlag) {
						uni.showModal({
							content: '确定不再关注此人？',
							success: (res) => {
								if (res.confirm) {
									this.concern(params)
									this.deleteFriend(params.toUid)
									this.user[index].relationFlag = !this.user[index].relationFlag;
								}
							}
						});
					} else {
						this.concern(params);
						this.addFriend(params.toUid);
						this.getTaskList(19);
						this.user[index].relationFlag = !this.user[index].relationFlag;
					}
				} else {
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});
				}
			},
			async getTaskList(taskid) {
				let params = {
					id: taskid
				}
				let res = await TaskApi.getTaskList(params)
				if(res.records[0].finishFlag) return
				if(!res.records[0].receiveFlag) {
					this.receiveTask(taskid).then(() => {
						this.finishTask(taskid);
					})
				} else {
					this.finishTask(taskid);
				}
			},
			async receiveTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.ReceiveTask(params)
				console.log('领取完成！');
			},
			async finishTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.FinishTask(params);
				console.log('任务完成！');
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		background: #fff;
		overflow: hidden;

		.content {
			width: 100%;
			background-color: #fff !important;
		}

		.JoinInList {
			width: 730rpx;
			margin: 200rpx auto 0;
			border-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
			padding-bottom: 10rpx;

			.item {
				width: 700rpx;
				height: 150rpx;
				margin: 30rpx auto;
				background-color: #f5f5f5;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info {
					display: flex;
					margin-left: 20rpx;

					.icon {
						position: relative;
						margin-right: 10rpx;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}

						.sex {
							position: absolute;
							bottom: 7rpx;
							right: 0rpx;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.detailed {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.name {
							margin: 10rpx 0 4rpx;
							color: #231815;
							font-weight: 700;
							font-size: 30rpx;
						}

						.desc {
							color: #595757;
							font-size: 22rpx;
						}
					}
				}

				.btn {
					width: 150rpx;
					height: 60rpx;
					border-radius: 30rpx;
					color: #fff;
					margin-right: 50rpx;
					background: linear-gradient(90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 21.23rpx;
						height: 20.16rpx;
					}
				}
			}
		}
	}

	.pt-300 {
		padding-top: 300rpx;
	}
</style>